/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <ul>
    <li>
      <div class="title">征收总户数(户)</div>
      <img :src="require('../../assets/img/chart-line.png')" alt class="img">
      <div class="num">{{family.planned}}</div>
    </li>
    <li>
      <div class="title">已完成征收户(户)</div>
      <img :src="require('../../assets/img/chart-line.png')" alt class="img">
      <div class="num">{{family.completed}}</div>
    </li>
    <li>
      <div class="title">进行中征收户(户)</div>
      <img :src="require('../../assets/img/chart-line.png')" alt class="img">
      <div class="num">{{family.progress}}</div>
    </li>
    <li>
      <div class="title">计划中征收户(户)</div>
      <img :src="require('../../assets/img/chart-line.png')" alt class="img">
      <div class="num">{{family.unstart}}</div>
    </li>
  </ul>
</template>

<script>
export default {
  props:{
    family: Object
  },
  data() {
    return {
    };
  },
  components: {}
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";
ul {
  width: 100%;
  height: 100%;
  position: relative;
  li {
    width: 50%;
    height: 50%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    float: left;
    padding: 0.5vw;
    padding-right: 2vw;
    padding-bottom: 1vw;
    .title {
      height: 20%;
      width: 100%;
      font-size: 1.2rem;
      color: #fff;
      text-align: left;
    }
    .img {
      height: 50%;
      width: 100%;
      padding-right: 1.5vw;
    }
    .num {
      height: 30%;
      width: 100%;
      font-size: 1.8rem;
      color: @blue;
      text-align: left;
      padding: 0.2vw 0;
      font-family: "digifacewide";
    }
  }
}
</style>
